<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BLUE-MUSIC</title>
    <link rel="stylesheet" href="css/music.css?v4" type="text/css">
    <link rel="stylesheet" href="css/css/font-awesome.css" type="text/css">
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--背景图遮罩-->
<div class="img_mask"></div>
<!--页面遮罩-->
<div class="blue_mask"></div>
<!--头部log-->
<header class="music_header">
    <div class="log">BLUE-MUSIC</div>
</header>
<!--中间主体-->
<div class="music_content">
    <div class="music_center">
        <div class="music_left">
            <div class="tab_list">
                <div class="list">
                    <ul>
                        <li>正在播放 </li>
                        <!--<li>播放列表</li>-->
                        <!--<li>歌曲搜索</li>-->
                    </ul>
                </div>
                <div class="search"  style="display: none;">
                    <span>
                        <input class="search_input" type="text" >
                    </span>
                    <span class="search_close">
                        <i class="fa fa-close"></i>
                    </span>
                    <span class="search_button">搜索</span>
                </div>
            </div>
            <div class="data_music">
                <div class="music_list">
                    <div class="list_item">
                        <span class="music_auth">专辑</span>
                        <span class="auth_name">演唱者</span>
                        <span class="music_name">歌曲</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="music_right">
            <div class="music_img">
                <img class="music_cover" src="img/player_cover.png" width="186" height="186">
            </div>
            <div class="music_lyric">
                <div class="lyric">

                </div>
            </div>
        </div>
    </div>
</div>
<footer class="music_footer">
    <div class="control">
        <div class="con_btn">
            <a class="play_btn btn_prev" id="btn_prev"></a>
            <a class="play_btn btn_play" id="btn_play"></a>
            <a class="play_btn btn_next" id="btn_next"></a>
        </div>
        <div class="con_vol">
            <div class="quiet">
                <a class="play_btn btn_quiet"></a>
            </div>
            <div class="volume">
                <div class="volume_box" id="volume_box">
                    <div class="volume_1"></div>
                    <div class="volume_2" style="width: 50%;"></div>
                    <div class="volume_3" id="volume_3" style="left: 50%;"></div>
                </div>
            </div>
        </div>
        <div class="progress" id="progress_box">
            <div class="progress_box" >
                <div class="progress_1"></div>
                <div class="progress_2" style="width: 0%;"></div>
                <div class="progress_3" id="progress_3" style="left: 0%;"></div>
            </div>
        </div>
    </div>
    <div style="display: none;">
        <audio controls src="" id="video_id"></audio>
    </div>
</footer>
</body>
<script>
    var music = {
        list:[],
        add: function(data){
            this.list.push(data);
        },
        remove: function(index){
            this.list[index].remove();
        },
        getAll: function(){
            return this.list;
        },
        getOne: function(index){
            return this.list[index];
        }
    };
    var musicIndex = 0;
    $(function(){
        $.ajax({
            url:"music.php?act=playlist",
            type:"get",
            dataType:"json",
            success:function(data)
            {
                console.log("加载数据中~~~~~");
                getListCallbak(data);
            }
        })
    });
    function getListCallbak(data)
    {
        for(var i = 0;i < data.result.tracks.length; i++)
        {
            var musicInfo = {
                musicName : data.result.tracks[i].name,
                musicId : data.result.tracks[i].id,
                albumImg : data.result.tracks[i].album.picUrl,
                albumName : data.result.tracks[i].album.name,
                authorName : data.result.tracks[i].artists[0].name,
                index : i
            };
            music.add(musicInfo);
        }
        console.log(music.getAll());
        insertMusic();
    }
    function insertMusic() {
        var musicList = music.getAll();
        var box = $(".music_list");
        for(var i = 0;i < musicList.length; i++)
        {
            var musicInfo = music.getOne(i);
            var html = '<div class="list_item"> ' +
                '<span class="music_no">' + (musicInfo.index + 1) +'</span> ' +
                '<span class="music_auth">' + musicInfo.albumName + '</span> ' +
                '<span class="auth_name">' + musicInfo.authorName + '</span> ' +
                '<span class="music_name"> ' +
                '<span>' +
                musicInfo.musicName +
                '</span> ' +
                '<div class="list_menu"> ' +
                '<span onclick="playThis('+ musicInfo.index +')">播放</span> ' +
                '<span>下载</span> ' +
                '<span>分享</span> ' +
                '</div> ' +
                '</span> ' +
                '</div>';
            box.append(html);
        }
    }
    var video_id = document.getElementById("video_id");
    //初始值
    var lang = video_id.volume = 0.5;

    $(".volume_2").css('width',lang * 100 + '%');
    $(".volume_3").css('left',lang * 100+'%');
    console.log($("#video_id"));
    //指定播放
    function playThis(index) {
        var musicThis = music.getOne(index);
        $.ajax({
            url:"music.php?act=musicData&id="+musicThis.musicId,
            type:"get",
            dataType:"json",
            success:function(data)
            {
                musicIndex = index;
                $("#video_id").attr("src",data.data[0].url);
                play.onclick();
                $(".music_cover").attr('src',musicThis.albumImg);
                $(".img_mask").css("background","url("+musicThis.albumImg+") ");
            }
        })
    }

    //播放控制
    var nextPlay = document.getElementById('btn_next');
    nextPlay.onclick = function () {
        var index = musicIndex + 1;
        var listL = music.getAll().length;
        if(index == listL)
        {
            console.log('已经是最后一首了');
            return;
        }
        playThis(index);
    }
    var prevPlay = document.getElementById('btn_prev');
    prevPlay.onclick = function () {
        var index = musicIndex - 1;
        if(index < 0)
        {
            console.log('不能再往前了');
            return;
        }
        playThis(index);
    }
    var play = document.getElementById('btn_play');
    play.onclick = function () {
        var videoSrc = $("#video_id").attr("src");
        if(videoSrc == "")
        {
            playThis(musicIndex);
        }
        if(video_id.paused)
        {
            $(this).css('background-position','-29px 0');
            video_id.play();
            setTime();
        }
        else
        {
            $(this).css('background-position','0 0');
            video_id.pause();
        }
    };
    //声音控制
    var bar = document.getElementById('volume_3');
    var barBox = document.getElementById('volume_box');
    barBox.onclick = function (event) {
        var event = event || window.event;
        var leftBox = event.clientX - this.offsetLeft;
        var width = $(".volume_box").width();
        var lang = (leftBox/width).toFixed(2);
        $(".volume_2").css('width',lang * 100 + '%');
        $(".volume_3").css('left',lang * 100+'%');
        video_id.volume = lang;
    };
    bar.onmousedown = function(event){
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;
        var that = this;
        // 拖动一定写到 down 里面才可以
        document.onmousemove = function(event) {
            var event = event || window.event;
            var barleft = event.clientX - leftVal;

            if (barleft < 0)
            {
                barleft = 0;
            }
            else if(barleft > scroll.offsetWidth - bar.offsetWidth)
            {
                barleft = scroll.offsetWidth - bar.offsetWidth;
            }
            var width = $(".volume_box").width();
            var lang = (barleft/width).toFixed(2);
            if(lang > 1)
            {
                lang = 1;
            }
            $(".volume_2").css('width',lang * 100 + '%');
            $(".volume_3").css('left',lang * 100+'%');
            video_id.volume = lang;
            //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            document.onmousedown = null;
        };

        return false;
    }
    //播放进度控制
    var time = document.getElementById('progress_3');
    var timeBox = document.getElementById('progress_box');
    timeBox.onclick = function (event) {
        var event = event || window.event;
        var leftBox = event.clientX - 170;
        var width = $(".progress_box").width();
        var lang = (leftBox/width).toFixed(2);
        $(".progress_2").css('width',lang * 100 + '%');
        $(".progress_3").css('left',lang * 100+'%');
        video_id.currentTime = lang * video_id.duration
    };
    time.onmousedown = function(event){
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;
        var that = this;
        // 拖动一定写到 down 里面才可以
        document.onmousemove = function(event) {
            var event = event || window.event;
            var barleft = event.clientX - leftVal;

            if (barleft < 0)
            {
                barleft = 0;
            }
            else if(barleft > scroll.offsetWidth - bar.offsetWidth)
            {
                barleft = scroll.offsetWidth - bar.offsetWidth;
            }
            var width = $(".progress_box").width();
            var lang = (barleft/width).toFixed(2);
            if(lang > 1)
            {
                lang = 1;
            }
            $(".progress_2").css('width',lang * 100 + '%');
            $(".progress_3").css('left',lang * 100+'%');

            video_id.currentTime = lang * video_id.duration;
            //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            document.onmousedown = null;
        };
        return false;
    };
    //进度条控制
    function setTime()
    {
        setInterval(function () {
            var time = (video_id.currentTime / video_id.duration).toFixed(6);
            var width = $(".progress_box").width();
            time = time * width;
            $(".progress_2").css('width',time  + 'px');
            $(".progress_3").css('left',time +'px');
            if(video_id.currentTime == video_id.duration)
            {
                nextPlay.onclick();
            }
        }, 100);
    }
</script>
</html>